<div class="input-group">
    <input type="text" class="form-control {{$class}}" value="{{$value}}" id="{{$id}}" name="{{$name}}" placeholder="{{$placeholder}}"
           {{$disabled ? 'disabled="disabled"':''}} {{$readonly ? 'readonly="readonly"':''}}>
    <span class="input-group-append input-group-btn add-on">
          <button type="button" class="btn btn-primary" onclick="selectFileWithCKFinder('{{$id}}');">
              选择
          </button>
    </span>
</div>
{{:builder_event_listen($js_hook, function () use($img_ext,$id,$url) {
return <<<HOOK
<script type="text/javascript">
    function selectFileWithCKFinder(elementId) {
        CKFinder.modal({
            displayFoldersPanel: false,
            //  readOnly: true,
            skin: 'neko',
            // skin: 'jquery-mobile',
            swatch: 'b',
            connectorPath: '{$url}',
            chooseFiles: true,
            width: 800,
            height: 600,
            lugins: [],
            onInit: function (finder) {
                finder.on('files:choose', function (evt) {
                    var file = evt.data.files.first();
                    var output = document.getElementById(elementId);
                    output.value = file.getUrl();
                });
                
                finder.on('file:choose:resizedImage', function (evt) {
                    var output = document.getElementById(elementId);
                    output.value = evt.data.resizedUrl;
                });
            }
        });
    }
</script>
HOOK;
})}}